<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- <div class="box"> -->
        <!-- 销毁与重建  也可以理解为删除与显示-->
        <!-- <h1>周末去玩</h1> -->
        <!-- 根据flag不同的状态，视图中只会显示一个h1，dom结构中也是只有一个h1 -->
        <!-- <h1 v-if="flag">{{msgY}}</h1>
        <h1 v-else>{{msgN}}</h1>
    </div> -->
    <!-- <script>
        //创建vue对象的实例
        let vm = new Vue({
            el:'.box',
            data:{
                flag:false,
                msgY:'我同意',
                msgN:'我反对'
            }
        })
    </script> -->

    <div class="box">
        <h1>成绩显示</h1>
        <h1 v-if="num>9">{{msgY}}</h1>
        <h1 v-else-if="num>6">{{msgj}}</h1>
        <h1 v-else>{{msgc}}</h1>
    </div>
    <script>
        let vm = new Vue({
            el:'.box',
            data:{
                num:8,
                msgY:'优秀',
                msgj:'及格',
                msgc:"不及格"
            }
        })
    </script>
</body>
</html>